<template>
	<view>
		<view class="answer-main" v-if="dataList.length > 0">
			<!-- 题目标题 -->
			<view class="answer-item-title">
				{{ currentIndex + 1}}.{{ currentItem.answerTitle ? currentItem.answerTitle : '' }}
			</view>
			<!-- 单选题 -->
			<view v-show="judgQuestionType(0)">
				<view class="answer-item-option" 
					v-for="(item, index) in currentItem.questionOptions" 
					:key="index" 
					@click="changeRadio(item)"
				>
					<radio :checked="item.optionItemIndex === singleIndex"/>
					<span>{{`${upperCode(item.optionItemIndex)}.${item.optionItemText}`}}</span>
				</view>
			</view>
			<!-- 多选题 -->
			<checkbox-group v-show="judgQuestionType(1)" @change="changeCheckBox">
				<view class="answer-item-option"
					v-for="(item, index) in currentItem.questionOptions"
					:key="index"
				>
					<checkbox :value="setCheckVal(item.optionItemIndex)" :checked="checkSelect(item.optionItemIndex)"/>
					<span>{{`${upperCode(item.optionItemIndex)}.${item.optionItemText}`}}</span>
				</view>
			</checkbox-group>
			<!-- 填空题 -->
			<view v-show="judgQuestionType(2)">
				<view class="answer-item-option">
					<textarea name="gapFill" placeholder="请输入您的答案" :value="gapFillText" @input="handleInputText"></textarea>
				</view>
			</view>
			<!-- 切换题目 -->
			<view class="answer-button-row">
				<button size="mini" v-show="currentIndex !== 0" @tap="preQuestion">上一题</button>
				<button size="mini" @tap="onSubmit">完成</button>
				<button size="mini" v-show="currentIndex !== dataList.length - 1" @tap="nextQuestion">下一题</button>
				<span class="inner-title" @tap="switchInnerMask">{{ innerText }}</span>
			</view>
		</view>
		
		<!-- 选题抽屉 -->
		<view class="answer-mask" v-show="showInnerMask">
			<view class="answer-mask-bg"  @tap="hideMask"></view>
			<view :class=" showInnerMask ? 'answer-mask-main' : ''">
				<view class="mask-inner-box">
					<view class="mask-item" 
						:style="{ 'background': index === currentIndex ? '#f0f0f0' : '' }"
						:class="{ 'mask-item-finish': isfinishItem(item) }"
						v-for="(item, index) in dataList" 
						:key="item.questionID"
						@tap="switchQuestion(index)"
					>
						{{ index + 1 }}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'Answer',
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			innerText: {
				type: String,
				default: '题号'
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				showInnerMask: false,	// 展示题号盒子
				currentIndex: 0, // 当前项索引
				currentItem: {}, // 当前题目
				singleIndex: -1,	// 单项选择
				checkBoxCheck: [],	// 多项选择
				gapFillText: '',	// 填空题
			};
		},
		methods: {
			// 加载当前问题
			initCurrentQuestion() {
				this.currentItem = this.getCurrentQuestion();
			},
			// 获取当前展示题目
			getCurrentQuestion() {
				if (this.dataList.length === 0) return {};
				if (this.dataList[this.currentIndex]) {
					return this.dataList[this.currentIndex];
				}
				return {};
			},
			// 检查题型 0 单选 1 多选 2 填空
			judgQuestionType(typeNum) {
				if (this.dataList.length === 0) return false;
				if (this.currentItem.questionType === typeNum &&
					this.currentItem.questionOptions !== undefined) {
					return true;
				} else {
					return false;
				}
			},
			// 单选切换
			changeRadio(item) {
				this.singleIndex = item.optionItemIndex;
				this.dataList[this.currentIndex].userAnswer = item.optionItemIndex;
				this.$emit('select', {
					question: this.getCurrentQuestion()
				})
			},
			// 多选切换
			changeCheckBox(e) {
				this.checkBoxCheck = e.detail.value;
				this.dataList[this.currentIndex].userAnswer = this.checkBoxCheck;
				this.$emit('select', {
					question: this.getCurrentQuestion()
				})
			},
			// 多选value
			setCheckVal(val) {
				return typeof(val) === 'number' ? val + '' : val;
			},
			// 多选选定
			checkSelect(index) {
				let that = this;
				index += '';
				for (let i = 0; i < that.checkBoxCheck.length; i++) {
					if (that.checkBoxCheck[i] === index) {
						return true;
					}
				}
				return false;
			},
			// 数字转大写字母
			upperCode(val) {
				if (typeof(val) === 'number') {
					return String.fromCharCode(0x60 + val).toUpperCase();
				}
				return val;
			},
			// 填空输入
			handleInputText(e) {
				this.gapFillText = e.detail.value;
				this.dataList[this.currentIndex].userAnswer = this.gapFillText;
			},
			// 上一题
			preQuestion() {
				let index = this.currentIndex - 1;
				this.switchQuestion(index);
			},
			// 完成
			onSubmit() {
				this.$emit('onSubmit', {
					questionList: this.dataList
				})
			},
			// 下一题
			nextQuestion() {
				let index = this.currentIndex + 1;
				this.switchQuestion(index);
			},
			// 切换题目
			switchQuestion(index) {
				let that = this;
				let oldIndex = that.currentIndex;
				let newIndex =index;
				if (!that.dataList[oldIndex]) return;
				
				if (this.dataList[oldIndex].questionType === 0) {
					that.$emit('switchTitle', {
						oldItem: {
							question: that.dataList[oldIndex],
							answer: that.singleIndex,
							index: oldIndex,
							total: that.dataList.length
						},
						newItem: {
							question: that.dataList[newIndex],
							index: newIndex,
							total: that.dataList.length
						}
					})
				} else if (this.dataList[oldIndex].questionType === 1) {
					that.$emit('switchTitle', {
						oldItem: {
							question: that.dataList[oldIndex],
							answer: that.checkBoxCheck ? that.checkBoxCheck : [],
							index: oldIndex,
							total: that.dataList.length
						},
						newItem: {
							question: that.dataList[newIndex],
							index: newIndex,
							total: that.dataList.length
						}
					})
				} else if (this.dataList[oldIndex].questionType === 2) {
					that.$emit('switchTitle', {
						oldItem: {
							question: that.dataList[oldIndex],
							answer: that.gapFillText,
							index: oldIndex,
							total: that.dataList.length
						},
						newItem: {
							question: that.dataList[newIndex],
							index: newIndex,
							total: that.dataList.length
						}
					})
				}
				
				this.currentIndex = newIndex;
				this.currentItem = this.getCurrentQuestion();
				
				this.hideMask();
				this.initQuestionOptions();
			},
			// 切换题号选项盒子
			switchInnerMask() {
				this.showInnerMask = !this.showInnerMask;
			},
			// 关闭抽屉
			hideMask() {
				this.showInnerMask = false;
			},
			// 初始化选项
			initQuestionOptions() {
				if (this.currentItem.questionType === 0) {
					this.singleIndex = this.currentItem.userAnswer;
				} else if (this.currentItem.questionType === 1) {
					if (this.currentItem.userAnswer 
						&& Array.isArray(this.currentItem.userAnswer)) {
						this.checkBoxCheck = this.currentItem.userAnswer;
					} else {
						this.checkBoxCheck = [];
					}
				} else if (this.currentItem.questionType === 2) {
					this.gapFillText = this.currentItem.userAnswer ? this.currentItem.userAnswer : "";
				}
			},
			// 检查是否完成
			isfinishItem(item) {
				return item.userAnswer;
			}
		},
		watch: {
			dataList: {
				handler(val, oldVal) {
					this.initCurrentQuestion()
				},
				immediate: true,
				deep: true
			},
			idnex: function (val, oldVal) {
				this.currentIndex = val;
				this.switchQuestion(this.currentIndex)
			}
		},
		created() {
			this.initCurrentQuestion();
		}
	}
</script>

<style lang="scss">
// 题目显示
.answer-main {
	margin: 20rpx 10rpx;
	background-color: #ffffff;
	
	.answer-item-title {
		position: relative;
		font-size: 15px;
		padding: 5rpx 0;
		margin-bottom: 5rpx;
	}
	
	.answer-item-title:after {
		position: absolute;
		content: " ";
		height: 1rpx;
		width: 100%;
		bottom: 0;
		left: 0;
		border-bottom: 1rpx solid #ababab;
	}
	
	.answer-item-option {
		padding: 5rpx 0;
	}
	
	.answer-item-option:last-child {
		margin-bottom: 10rpx;
	}
	
	.answer-item-option textarea {
		width: 100%;
		border: 1rpx solid gray;
		border-radius: 5rpx;
	}
}

// 按钮
.answer-button-row {
	display: flex;
	justify-content: space-;
	
	.inner-title {
		font-size: 18rpx;
		color: gray;
	}
}

// 题号抽屉
.answer-mask {
	.answer-mask-bg, .answer-mask-main {
		position: absolute;
		width: 100%;
		left: 0;
	}
	
	.answer-mask-bg {
		height: 100%;
		background-color: #999999;
		opacity: 0.5;
		top: 0;
	}
	
	.answer-mask-main {
		height: 50%;
		background-color: #ffffff;
		bottom: 0;
		padding: 15rpx 10rpx;
		animation: showMask 0.25s ease;
		
		.mask-inner-box {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			padding-bottom: 12rpx;
			
			.mask-item {
				height: 83rpx;
				width: 83rpx;
				text-align: center;
				line-height: 73rpx;
				box-sizing: border-box;
				border: 1rpx solid #999999;
				border-radius: 10rpx;
				box-shadow: 0rpx 1rpx 1rpx #ABABAB;
				margin: 8rpx;
				padding: 10rpx;
			}
			
			.mask-item-finish {
				color: #007Aff;
			}
		}
	}
}

@keyframes showMask {
	from {
		height: 0;
	} to {
		height: 50%;
	}
}
</style>
